<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定:1.v-bind:,2.v-model:</title>
    <!-- 1.导入vue.js，他的目的用于构造Vue实例对象 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 2.准备一个div容器，他的目的性：用于挂载到Vue对象上面，
        然后将Vue实例对象中的data数据渲染到页面上面
     -->
     <div id="app">
       <!-- 普通写法 单向数据绑定 全写方式 -->
        全写的单向数据绑定：<input type="text" v-bind:value="userName"><br/>
        <!-- 普通写法 单向数据绑定 全写方式-->
        全写的双向数据绑定：<input type="text" v-model:value="nickName"><br/>
        
        <!-- 简写 v-bind:value和v-model:value 
            可以简写为 v-model，因为v-model默认收集的就是value值-->
        简写的单向数据绑定：<input type="text" :value="userName"><br/>
        简写的双向数据绑定：<input type="text" v-model="nickName"><br/>
     </div>
</body>
<!-- 3.通过new关键字  调用全局vue.js里面的Vue(options)构造函数 -->
<script>
    Vue.config.productionTip = false///去除生产环境的提示

   const a = new Vue({
        el:'#app',//通过id选择器将div容器挂载到Vue实例对象上面
        data:{  //对象式的数据源定义方式
            userName: '李伟',
            nickName: '黑皮'
        }
    })
    console.log(a.userName)
</script>

</html>